<!DOCTYPE html>

<html lang='en'>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/react.development16.4.0.js"></script>
    <script src="./lib/react-dom.development16.4.0.js"></script>
    <script src="./lib/babel.min.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap.min.css" />
     <style>
       .fdiv{
           height: 600px;
           border: 1px solid #000;
       }
       .ishow{
           display: block;
           width: 100%;
           height: 600px;
           border: 1px salmon solid;
           font-size: 24px;
       }
       .ishide{
           display: none;
       }
     </style>
</head>

<body>
    <div id="app">
    </div>
    <script type="text/babel">
        /**
        *  父组件中嵌套2个子组件
           1.创建子组件
           2.props 父组件传递给子组件的值
        */
        function Component01(props) {
            if(props.isShow)
            return <div className="ishow">子组件1</div>
            else
            return <div className="ishide">子组件1</div>
        }
        function Component02(props) {
            if(props.isShow1)
            return <div className="ishow">子组件2</div>
            else
            return <div className="ishide">子组件2</div>
        }

        function Component03(props) {
            if(props.isShow2)
            return <div className="ishow">子组件3</div>
            else
            return <div className="ishide">子组件2</div>
        }

        function Component04(props) {
            if(props.isShow3)
            return <div className="ishow">子组件4</div>
            else
            return <div className="ishide">子组件2</div>
        }

        const Mysty = {
                width: 350,
                margin: '0 auto'
        };

        class FatherComponent extends React.Component {
            constructor(props) {
                super(props)
                this.state={
                    isShow:true,
                    isShow1:false,
                    isShow2:false,
                    isShow3:false
                }
                this.btn_clcik = this.btn_clcik.bind(this);
                this.btn_clcik1 = this.btn_clcik1.bind(this);
                this.btn_clcik2 = this.btn_clcik2.bind(this);
                this.btn_clcik3 = this.btn_clcik3.bind(this);
            }

            btn_clcik(){
              this.setState({
                    isShow:true,
                    isShow1:false,
                    isShow2:false,
                    isShow3:false
                });
            }
            btn_clcik1(){
                this.setState({
                    isShow:false,
                    isShow1:true,
                    isShow2:false,
                    isShow3:false
                });
            }
            btn_clcik2(){
                this.setState({
                    isShow:false,
                    isShow1:false,
                    isShow2:true,
                    isShow3:false
                });
            }
            btn_clcik3(){
                this.setState({
                    isShow:false,
                    isShow1:false,
                    isShow2:false,
                    isShow3:true
                });
            }
            render() {
                return (
                    <div style={Mysty}>
                        <button type="button" onClick={this.btn_clcik} className="btn btn-primary">组件1</button>
                        <button type="button" onClick={this.btn_clcik1} className="btn btn-primary">组件2</button>
                        <button type="button" onClick={this.btn_clcik2} className="btn btn-primary">组件3</button>
                        <button type="button" onClick={this.btn_clcik3} className="btn btn-primary">组件4</button>
                        <div className="fdiv">
                            <Component01 isShow={this.state.isShow}/>
                            <Component02 isShow1={this.state.isShow1}/>
                            <Component03 isShow2={this.state.isShow2}/>
                            <Component04 isShow3={this.state.isShow3}/>
                        </div>
                    </div>
                )
            }
        }
        

        const el = <FatherComponent/>
        ReactDOM.render(
            el,document.getElementById('app')
        );
    </script>
</body>

</html>